<template>
  <div :class="cn(cardVariants({ visual, modifier, size }))">
    <slot name="header"></slot>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
import { cva } from "class-variance-authority";
import { cn } from "@/components/utils";
import type { Size, CardVisual, CardModifier } from "./types";

interface Props {
  visual?: CardVisual;
  modifier?: CardModifier;
  size?: Size;
}
defineProps<Props>();

const cardVariants = cva("card", {
  variants: {
    visual: {
      border: "card-border",
      dash: "card-dashed",
    },
    modifier: {
      side: "card-side",
      full: "card-full",
    },
    size: {
      xs: "card-xs",
      sm: "card-sm",
      md: "card-md",
      lg: "card-lg",
      xl: "card-xl",
    },
  },
  defaultVariants: {},
});
</script>
